<template>
  <view class="serach">
    <view class="content" :style="{ 'border-radius': radius + 'px' }">
      <!-- 增加进入输入状态的点击范围 -->
      <view class="content-box" :class="{ center: mode === 2 }">
        <text class="icon icon-serach"></text>
        <!-- 增加placeholder input confirm-type confirm-->
        <input
          :placeholder="placeholder"
          @input="inputChange"
          confirm-type="search"
          @confirm="triggerConfirm"
          class="input"
          :class="{ center: !active && mode === 2 }"
          :focus="isFocus"
          v-model="inputVal"
          @focus="focus"
          @blur="blur"
        />
        <!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> -->
        <!-- @click换成@click.stop阻止冒泡 -->
        <text v-if="isDelShow" class="icon icon-del" @click.stop="clear"></text>
      </view>
      <view
        v-show="(active && show && button === 'inside') || (isDelShow && button === 'inside')"
        class="serachBtn"
        @click="search"
      >
        搜索
      </view>
    </view>
    <view
      v-if="button === 'outside'"
      class="button"
      :class="{ active: show || active }"
      @click="search"
    >
      <view class="button-item">{{ !show ? searchName : '搜索' }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    mode: {
      type: Number,
      default: 1,
    },
    // 定义默认搜索关键词(水印文字)
    placeholder: {
      type: String,
      default: '请输入搜索内容',
    },
    value: {
      type: String,
      default: '',
    },
    button: {
      type: String,
      default: 'outside',
    },
    show: {
      type: Boolean,
      default: true,
    },
    radius: {
      type: String,
      default: '60',
    },
  },
  data() {
    return {
      active: false,
      inputVal: '',
      searchName: '取消',
      isDelShow: false,
      isFocus: true,
    };
  },
  watch: {
    inputVal(newVal) {
      if (newVal) {
        this.searchName = '搜索';
        // this.isDelShow = true; //直接点击页面预设关键字样式异常，注销
      } else {
        this.searchName = '取消';
        this.isDelShow = false;
      }
    },
    // 双向绑定
    value(val) {
      this.inputVal = val;
    },
  },
  methods: {
    // 触发组件confirm事件
    triggerConfirm() {
      this.$emit('confirm', false);
    },
    // 触发组件input事件
    inputChange(event) {
      const keyword = event.detail.value;
      this.$emit('input', keyword);
      if (this.inputVal) {
        this.isDelShow = true;
      }
    },
    focus() {
      this.active = true;
      // 增加获取焦点判断
      if (this.inputVal) {
        this.isDelShow = true;
      }
    },
    blur() {
      this.isFocus = false;
      if (!this.inputVal) {
        this.active = false;
      }
    },
    clear() {
      // 收起键盘
      uni.hideKeyboard();
      this.isFocus = false;
      this.inputVal = '';
      this.active = false;
      // 清空内容时候触发组件input
      this.$emit('input', '');
      // this.$emit('search', '');//清空内容时候不进行搜索
    },
    getFocus() {
      if (!this.isFocus) {
        this.isFocus = true;
      }
    },
    search() {
      // 增加点击取消时候退出输入状态，内容为空时，输入默认关键字
      if (!this.inputVal) {
        if (!this.show && this.searchName === '取消') {
          uni.hideKeyboard();
          this.isFocus = false;
          this.active = false;
          return;
        }
      }
      this.$emit('search', this.inputVal ? this.inputVal : this.placeholder);
    },
  },
};
</script>

<style lang="scss">
.serach {
  display: flex;
  width: 100%;
  //border-bottom: 1px #f5f5f5 solid; //去掉边框
  font-size: $uni-font-size-base;
  box-sizing: border-box;
  .content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60upx;
    //border: 1px #ccc solid; //去掉边框
    overflow: hidden;
    background: #fff;
    border-radius: 30px;
    transition: all 0.2s linear;

    .serachBtn {
      height: 100%;
      padding: 0 30upx;
      flex-shrink: 0;
      line-height: 60upx;
      //background: $uni-color-success;
      color: #fff;
      //按钮背景色
      background: linear-gradient(to right, #ff9801, #ff570a);
      //border-left: 1px #ccc solid; //去掉边框
      transition: all 0.3s;
    }
  }

  .content-box {
    display: flex;
    width: 100%;
    align-items: center;
    &.center {
      justify-content: center;
    }

    .input {
      width: 100%;
      height: 60upx;
      max-width: 100%;
      line-height: 60upx;
      transition: all 0.2s linear;
      &.center {
        width: 200upx;
      }
      &.sub {
        // position: absolute;
        width: auto;
        color: grey;
      }
    }
  }
  .icon {
    padding: 0 15upx;
    &.icon-del {
      font-size: 38upx;
      &:before {
        content: '\e644';
      }
    }
    &.icon-serach:before {
      content: '\e61c';
    }
  }

  .button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.2s linear;
    &.active {
      width: 100upx;
      padding-left: 15upx;
    }
  }
}
//把字体改成本地加载
@font-face {
  font-family: 'iconfont';
  src: url('data:application/x-font-woff;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzI8fEg3AAABfAAAAFZjbWFws6gbWQAAAeQAAAGcZ2x5ZqgAaogAAAOMAAABMGhlYWQTyEk0AAAA4AAAADZoaGVhB90DhQAAALwAAAAkaG10eBAA//8AAAHUAAAAEGxvY2EA0gBOAAADgAAAAAptYXhwARIANgAAARgAAAAgbmFtZT5U/n0AAAS8AAACbXBvc3SanfjSAAAHLAAAAEUAAQAAA4D/gABcBAD//wAABAAAAQAAAAAAAAAAAAAAAAAAAAQAAQAAAAEAAL8Cm/NfDzz1AAsEAAAAAADYVQKbAAAAANhVApv///+ABAADgQAAAAgAAgAAAAAAAAABAAAABAAqAAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQQAAZAABQAIAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5gbmRAOA/4AAXAOBAIAAAAABAAAAAAAABAAAAAQA//8EAAAABAAAAAAAAAUAAAADAAAALAAAAAQAAAFoAAEAAAAAAGIAAwABAAAALAADAAoAAAFoAAQANgAAAAgACAACAADmBuYc5kT//wAA5gbmHOZE//8AAAAAAAAAAQAIAAgACAAAAAIAAQADAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAA0AAAAAAAAAAMAAOYGAADmBgAAAAIAAOYcAADmHAAAAAEAAOZEAADmRAAAAAMAAAAAADoATgCYAAAAAv///4AEAAOAABMAHwAABQYiLwEGJCcmAjc2JBcWEgcXFhQBJiAHBhQXFiA3NjQD7RQyFMaG/sl9hw2BiQFqjXgTZccT/sBo/spoPz9oATZoPm0TE8dhDG6FAW2OhwaGfv6+h8YUMgLThoZV0FWGhlnMAAABAAD/gAMAA4EABQAACQE1CQE1AQACAP6IAXgBgP4AiAF4AXiIAAAABAAA//4DlAMnABAAIQAlACkAAAUuAzQ+AjIWFxYQBw4BAyIOAhQeAjI2NzYQJy4BFwEnAQU3AQcCAFKScz09c5Kkkjp2djqSUkiBZjU1ZoGQgTNoaDOBfP6YIAFo/qQgAVwgAgE9cpOjknM9PTl8/r18OT0C9zVmgZCBZTU1Mm4BHW0zNb/+mCABZysf/qQgAAAAAAAAEgDeAAEAAAAAAAAAFQAAAAEAAAAAAAEACAAVAAEAAAAAAAIABwAdAAEAAAAAAAMACAAkAAEAAAAAAAQACAAsAAEAAAAAAAUACwA0AAEAAAAAAAYACAA/AAEAAAAAAAoAKwBHAAEAAAAAAAsAEwByAAMAAQQJAAAAKgCFAAMAAQQJAAEAEACvAAMAAQQJAAIADgC/AAMAAQQJAAMAEADNAAMAAQQJAAQAEADdAAMAAQQJAAUAFgDtAAMAAQQJAAYAEAEDAAMAAQQJAAoAVgETAAMAAQQJAAsAJgFpCkNyZWF0ZWQgYnkgaWNvbmZvbnQKaWNvbmZvbnRSZWd1bGFyaWNvbmZvbnRpY29uZm9udFZlcnNpb24gMS4waWNvbmZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgBpAGMAbwBuAGYAbwBuAHQAUgBlAGcAdQBsAGEAcgBpAGMAbwBuAGYAbwBuAHQAaQBjAG8AbgBmAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBuAGYAbwBuAHQARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAECAQMBBAEFAAZzb3VzdW8IamlhbnRvdTQHc2hhbmNodQAAAAAA');
}

.icon {
  // font-family: iconfont;
  font-size: 32upx;
  font-style: normal;
  color: #999;
}
</style>
